import React, { useState, useEffect } from "react";
import Del from "./del";
import Anli from "./anli";
export default function App() {
    let [a, seta] = useState(0)
    let [obj, setobj] = useState({
        name: "wyt",
        age: 20
    })
    let [opacity, setopacity] = useState(1)
    let [flag, setFlag] = useState(true)
    function add() {
        seta(a => a + 1)
    }
    function editObj() {
        let newObj = { ...obj }
        newObj.name = "www"
        newObj.age = 30
        setobj(newObj)
        console.log(newObj, "obj")
    }
    useEffect(() => {
        setInterval(() => {
            setopacity(opacity => {
                return opacity - 0.1
            })
        }, 200)
        console.log(opacity)
        return () => {
            console.log("销毁")
        }
    }, [])
    function del() {
        setFlag(false)
    }
    return (
        <div>
            <button onClick={add}>添加</button>
            <h1>{a}</h1>
            <button onClick={editObj}>修改对象属性</button>
            <h1>姓名：{obj.name}</h1>
            <h1>年龄：{obj.age}</h1>
            <h1
                style={{
                    opacity,
                }}
            >显示显示隐藏隐藏</h1>
            <button onClick={del}>销毁del组件</button>
            {flag && <Del>del组件</Del>}
            {/* <Anli></Anli> */}
        </div>
    )
}